<template>
  <div id="main" :style="myChartStyle"></div>
</template>

<script setup lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import * as echarts from "echarts";
import apiService from "@/services/apiService";
import { conversionUtcDate, base64ToExcelAndDownload } from "@/utils/auth";
import { v4 as uuidv4 } from "uuid";
import { getToken } from "@/utils/auth";
import { useUserStoreHook } from "@/store/modules/user";
//echars样式
const myChartStyle = ref<any>({ float: "left", width: "80%", height: "300px" });
const UserStore = useUserStoreHook();

//初始化函数
const initEcharts = () => {
  // 绘制图表
  const option = {
    grid: {
      top: "30%", // 设置上边距为 20%
      left: "8%", // 设置左边距为 3%
      right: "4%", // 设置右边距为 4%
      bottom: "3%", // 设置下边距为 3%
      containLabel: true
    },
    title: {
      text: "访问人数"
    },
    tooltip: {},
    xAxis: {
      data: ["数据1", "数据2", "数据3", "数据4", "数据5", "数据6"],
      axisTick: {
        // x轴刻度线
        show: false
      }
    },
    yAxis: {
      axisLine: {
        show: false
      },
      splitLine: {
        lineStyle: {
          type: "dashed"
        }
      }
    },
    legend: {
      data: ["人数"],
      top: "15%",
      right: "0%"
    },
    series: [
      {
        name: "数据量",
        type: "bar",
        data: [5, 20, 36, 10, 10, 20],
        barWidth: "35%",
        label: {
          // 柱状图上方文本标签，默认展示数值信息
          show: true,
          position: "top"
        },
        itemStyle: {
          barBorderRadius: [5, 5, 0, 0], // 柱体圆角
          color: "#37DBFF"
        }
      }
    ]
  };

  const myChart = echarts.init(document.getElementById("main"));
  myChart.setOption(option);
  //随着屏幕大小调节图表
  window.addEventListener("resize", () => {
    myChart.resize();
  });
};

onMounted(() => {
  initEcharts();
  


})
</script>

<style lang="scss" scoped>
#main {
  width: "30%";
  height: "300px";
}
</style>
